<template>
	<view class="">
	  <view class="" style="margin-bottom: 120rpx;">
	    <block v-for="(item, index) in listall" :key="index">
	      <view class="tn-margin tn-padding-bottom-sm" @click="gotos(item.id)" 
		   style="padding: 10px;box-shadow: 5px 5px 5px 5px rgba(225, 225, 225, 0.5);width: 96%;margin: 0 auto;border-radius: 10px;margin-top: 8px;background-color: #fff;">
	        <view class="tn-flex">
	          <view class="image-pic tn-shadow-blur tn-margin-right-sm" :style="'background-image:url(' + item.imagelist[0] + ')'">
	            <view class="image-article">
	            </view>
	          </view>
	          <view class="tn-margin-left-sm tn-margin-top-xs" style="width: 100%;">
	            <view class="tn-text-lg tn-text-bold clamp-text-1 tn-text-justify">
	              {{ item.title }}
	            </view>
	            <view class="tn-padding-top-xs" style="min-height: 50rpx;overflow: hidden;margin-top: 5px;">
				 <view class="tn-text-df clamp-text-2" :class="types==0?'lanb':'lanbs'" style="font-weight: 600;width:20%;float: left;text-align: left;font-size: 14px;">
				  {{types==0?'供应':'采购'}}
				 </view>
	              <view class="tn-text-df clamp-text-2" style="font-weight: 600;width:30%;float: left;text-align: left;font-size: 14px;">
	                {{ item.num }}吨
	              </view>
				  <view class="tn-text-df clamp-text-2" style="font-weight: 600;width:50%;float: left;text-align: right;font-size: 14px;">
				    {{ item.address }}
				  </view>
	            </view>
	            <view class="tn-flex tn-flex-row-between tn-flex-col-between" style="margin-top: 20px;">
	              <view v-for="(label_item,label_index) in item.clist" :key="label_index" style="font-size: 14px;color: #3B83FC;border: 1px solid #3B83FC;padding: 1px 5px 1px 5px;border-radius: 3px;"
	                class="justify-content-item  tn-margin-right  tn-text-bold">
	                {{ label_item.name }}
	              </view>
	              <view class="justify-content-item tn-text-center" style="">
	                <text class="tn-padding-right tn-text-df" style="width:30px;overflow: hidden;">
						<text class="tn-icon-eye" style="font-size: 16px;margin-right: 3px;"></text>
						{{ item.konum }}
					</text>
	              </view>
	            </view>
				<!-- <view class="tn-flex tn-flex-row-between tn-flex-col-between" style="margin-top: 5px;">
					<view style="width:100%;overflow: hidden;text-align: right;color: #A93023;">浏览:{{ item.konum }}</view>
				</view> -->
	          </view>
	        </view>
	      </view>
	    </block>
	  </view>
	  
	</view>
	  
	  

</template>

<script>
	export default {
		name:"lists",
		props:{
			listall:{
				type: Array
			},
			types:{
				type: Number
			}
		},
		data() {
			return {
		    
			};
		},
		methods:{
			gotos(e){
				let typesa = this.types
				if(typesa==0){
					uni.navigateTo({
						url: '/pages/job/fbdetail?id=' + e
					})
				}else{
					uni.navigateTo({
						url: '/pages/job/cgdetail?id=' + e
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
 /* 胶囊*/
  .tn-custom-nav-bar__back {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 1000rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 18px;
    
    .icon {
      display: block;
      flex: 1;
      margin: auto;
      text-align: center;
    }
    
    &:before {
      content: " ";
      width: 1rpx;
      height: 110%;
      position: absolute;
      top: 22.5%;
      left: 0;
      right: 0;
      margin: auto;
      transform: scale(0.5);
      transform-origin: 0 0;
      pointer-events: none;
      box-sizing: border-box;
      opacity: 0.7;
      background-color: #FFFFFF;
    }
  }
  
  /* 资讯主图 start*/
  .image-article {
    border-radius: 8rpx;
    border: 1rpx solid #F8F7F8;
    width: 180rpx;
    height: 200rpx;
    position: relative;
  }
  
  .image-pic {
    width: 200rpx;
    height: 200rpx;
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    border-radius: 10rpx;
  }
  
  .article-shadow {
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }
  
  .lanb{
	  color: #3B83FC;
  }
  .lanbs{
	  color: #A93023;
  }
  /* 文字截取*/
  .clamp-text-1 {
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  .clamp-text-2 {
    -webkit-line-clamp: 2;
    // display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  /* 标签内容 start*/
  .tn-tag-content {
    &__item {
      display: inline-block;
      line-height: 35rpx;
      padding: 5rpx 25rpx;
  
      &--prefix {
        padding-right: 10rpx;
      }
    }
  }
</style>